import React, { Component, createRef } from 'react'
import { Modal, Form, message,  Radio  } from 'antd'
import { post } from '../../lib'
import { FormTextItem } from '../../components/index'
// import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
// import styles from './index.module.css'
import ImageUpload from '@/components/ImageUpload/ImageUpload'
import store from '@/store' // 引入全局状态

export default class Detail extends Component {
  // 创建一个form的引用
  formRef = createRef();
  imageRef = createRef(); // 图片组件的引用
  state = {
    visible: false, // 是否显示
    record: null, // 传过来的值
    isModify: false, // 是否是修改
    isMofifyPersonal: false, //是否式修改个人信息 
  };
  // 提供一个方法给父组件打开这个弹窗
  // isMofifyPersonal是否式修改个人信息
  show = (record, isMofifyPersonal) => {
    this.setState({
      visible: true,
      record,
      isModify: !!record, // 如果传了record，就是修改，否则就是新增
      isMofifyPersonal,
    });
  }
  submit = async () => { // 提交接口
    const { record, isModify, isMofifyPersonal } = this.state;
    const { refreshList } = this.props; // 父组件传下来的属性列表函数
    const values = await this.formRef.current.validateFields().catch(e => { });
    if (!values) return;
    // 修正head字段
    values.head = this.imageRef.current.state.imageUrl; // 修正的时候使用子组件的值来修正
    // return console.log('=================values', values);
    // 如果是修改，需要设置id
    let url = '/create/member';
    if (isModify) {
      values.id = record.id;
      url = '/modify/member';
    }
    const data = await post(url, values);
    if (!data.success) {
      return alert(data.message);
    }
    message.success(isModify ? '修改成功' : '新增成功');
    if (isMofifyPersonal) { // 如果是修改个人信息
      // 更新全局的状态
      store.dispatch({ type: 'setPersonal', payload: data.result });
      // this.props.setPersonal(data.result); // 使用map封装的属性调用
    } else {
      // 刷新列表
      refreshList && refreshList(); // 先判断一下
    }
    this.setState({ visible: false });
  }

  render() {
    const { visible, record, isModify, isMofifyPersonal } = this.state;
    return (
      visible && // 直接刷新一下dom
      <Modal
        title={isMofifyPersonal ? '修改个人信息' : isModify ? '修改人员' : '新增人员'}
        centered
        open={visible}
        onOk={this.submit}
        onCancel={() => this.setState({ visible: false })}
        width={800}
      >
        <Form
          ref={this.formRef}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          initialValues={{ // 初始值
            head: record?.head,
            name: record?.name, // 修改传过来的初始值
            phone: record?.phone,
            gender: record?.gender,
          }}
          autoComplete="off"
        >
          <ImageUpload ref={this.imageRef} label="头像" name="head" defaultUrl={record?.head} />
          <FormTextItem label="姓名" name="name" type="name" />
          <FormTextItem label="手机号码" name="phone" type="phone" />
          <Form.Item
              label='选择性别'
              name='gender' /* 字段名称 */
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Radio.Group onChange={this.onChange} >
                <Radio value='男'>男</Radio>
                <Radio value='女'>女</Radio>
              </Radio.Group>
            </Form.Item>
        </Form>
      </Modal>
    )
  }
}

// export default connect(null, dispatch => ({ // dispatch 等价于 store.dispath
//   setPersonal: function(info) {
//     dispatch({ type: 'setPersonal', payload: info });
//   }
// }))(Detail);